<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="stroke"></div>
	</body>
	<style>
		body{
			margin: 0;
			padding: 0;
			background: #262626;
		}
		
		.stroke{
			width: 400px;
			height: 2px;
			background: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		
		.stroke:before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #262626;
			animation: animate 5s linear infinite;
			animation-timing-function: cubic-bezier(0.75, 0.04, 0, .86);
		}
		.stroke:after{
			content: '🖊';
			position: absolute;
			top: -50px;
			left: 0;
			width: 100%;
			height: 100%;
			background: #262626;
			animation: animate 5s linear infinite;
			color: #a9ff08;
			font-size: 50px;
			transform: translateX(2px);
			animation-timing-function: cubic-bezier(0.75, 0.04, 0, .86);
		}
		@keyframes animate{
			0%{
				left: 0;
			}
			50%{
				left: 100%;
			}
			100%{
				left: 0;
			}
		}
	</style>
</html>